import React, { Component } from 'react';
import { Grid, Select, Search, Input, DatePicker, CascaderSelect } from '@alifd/theme-ds-jxc';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';
import { PurStatus } from '../../../../utils/setting';

const { Row, Col } = Grid;
const { RangePicker } = DatePicker;
export default class chooseHead extends Component {
  static displayName = '采购汇总筛选';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      SupperDataList: [], // 供应商数据
      GoodsTypeList: [], // 商品类别数据
      filterData: {},
      purSumFiltervalue: {
        s_id: '', // 操作员ID
        class_id: '', // 仓库ID
        type: '', // 类型
        search: '', // 搜索内容
        time: [], //
      },
    };
  }
  // 获取供应商列表
  getSupperInfo= () => {
    service({
      method: 'get',
      url: api.GetSuperList,
    })
      .then((res) => {
        const data = res.data.list;
        const NewSList = [];
        data.forEach((item) => {
          NewSList.push({ label: item.name, value: item.id.toString() });
        });
        NewSList.sort((item1, item2) => {
          return item1.label.localeCompare(item2.label, 'cn');
        });
        this.setState(
          {
            SupperDataList: NewSList,
          }
        );
      });
  }
  // 获取商品类别列表
  getGoodsTypeList= () => {
    service({
      method: 'get',
      url: api.GoodsTypeList,
    })
      .then((res) => {
        // console.log(res);
        const data = res.data.class_list;
        data.forEach((item) => {
          if (item.children) {
            item.children.sort((item1, item2) => {
              return item1.label.localeCompare(item2.label, 'cn');
            });
          }
        });
        this.setState(
          {
            GoodsTypeList: data,
          }
        );
      });
  }
  componentDidMount() {
    this.getGoodsTypeList();
    this.getSupperInfo();
  }
  formChange= (value) => {
    this.setState(
      {
        purSumFiltervalue: {
          s_id: value.s_id, // 供应商ID
          class_id: value.class_id, // 商品类别ID
          search: value.search, // 搜索内容
          type: value.type, //
          time: value.time,
        },
      }, () => {
        console.log(this.state.purSumFiltervalue);
        this.props.onChange(value);
      }
    );
  }
  render() {
    return (
      <div style={styles.overview}>
        <PageHead title="采购汇总筛选" />
        <IceContainer style={styles.alignRight}>
          <IceFormBinderWrapper onChange={this.formChange} value={this.state.purSumFiltervalue}>
            <Row gutter="5" wrap>
              <Col span="6" >
                <span style={styles.SelectLabel}>供应商</span>
                <IceFormBinder name="s_id">
                  <Select dataSource={this.state.SupperDataList} size="large" autoWidth placeholder="请选择分店仓库" style={styles.Select} hasClear />
                </IceFormBinder>
              </Col>
              <Col span="6" >
                <span style={styles.SelectLabel}>商品类别</span>
                <IceFormBinder name="class_id">
                  <CascaderSelect hasClear dataSource={this.state.GoodsTypeList} size="large" expandTriggerType="hover" placeholder="请选择商品类别" style={styles.Select} listStyle={{ width: '180px' }} />
                </IceFormBinder>
              </Col>
              <Col span="6" >
                <span style={styles.SelectLabel}>采购状态</span>
                <IceFormBinder name="type">
                  <Select dataSource={PurStatus} size="large" autoWidth placeholder="请选择采购状态" style={styles.Select} hasClear />
                </IceFormBinder>
              </Col>
              <Col span="6" >
                <span style={styles.SelectLabel}>采购时间</span>
                <IceFormBinder name="time">
                  <RangePicker size="large" format="YYYY-MM-DD" style={styles.Select.DatePicker} />
                </IceFormBinder>
              </Col>
            </Row>
            <Row style={{marginTop:'20px'}}>
              <Col span="6" >
                <span style={styles.SelectLabel}>商品搜索</span>
                  <IceFormBinder name="search">
                    <Search
                      type="normal"
                      placeholder="请输入商品名称或商品条码"
                      size="medium"
                      style={styles.Select}
                    />
                  </IceFormBinder>
                </Col>
            </Row>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'left',
    width: 'calc(100% - 100px)',
    height: '38px',
    maxWidth: '300px',
    DatePicker: {
      width: 'calc(100% - 100px)',
      // minWidth: '130px',
      float: 'left',
      maxWidth: '300px',
    },
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  row: {
    marginBottom: '20px',
  },
  input: {
    float: 'left',
  },
};
